<template>
  <div class="main-page">
    <div class="page-title">
      {{ route.meta.title }}
    </div>
    <div class="page-sub-title">专注于表格的使用</div>
    <div class="page-search">
      <el-button type="primary" @click="router.push('/role/details')">新增</el-button>
      <el-input v-model="searchText" placeholder="请输入搜索内容" />
      <el-button type="primary" @click="handleSearch">搜索</el-button>
    </div>
    <el-table :data="tableData">
      <el-table-column prop="date" label="uuid" width="180" />
      <el-table-column prop="name" label="Name" width="180" />
      <el-table-column prop="address" label="Address" />
      <el-table-column prop="label" label="Label" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button
            type="primary"
            size="mini"
            @click="router.push('/role/details/' + scope.row.uuid)"
            >编辑</el-button
          >
          <el-button type="danger" size="mini" @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup lang="ts">
import { useRoute, useRouter } from "vue-router";
const router = useRouter(); // 路由实例
const route = useRoute(); // 当前路由信息

const searchText = ref("");
const tableData = ref([{
  uuid: "1",
  name: "admin",
  address: "中国",
  label: "管理员",
}]);

/**
 * 搜索角色
 */
const handleSearch = () => {
  console.log("搜索角色", searchText.value);
};


/**
 * 删除角色
 * @param row 角色信息
 */
const handleDelete = (row: any) => {
  console.log("删除角色", row);
};
</script>

<style scoped>
.page-search {
  display: flex;
}
</style>
